<template>
    <div>
        <!--列表面板-->
        <el-card class="box-card">
            <el-button type="primary" size="small" @click="formHandle('add')">+ 添加</el-button>
            <div class="interspaceH"></div>
            <el-table :data="pageDataSource" :header-cell-style="{background:'#F3F4F7',color:'#555'}" style="width: 100%">
                <el-table-column label="成员信息" width="200px;">
                    <template slot-scope="scope">
                        <div style="display: flex;">
                            <img style="height:45px; flex:1; border-radius:30px;" :src="scope.row.thumbAvatar == null?
                                'https://p.qlogo.cn/bizmail/NnAtIz9dn8mmFzr898uv0Waqxc6jIBy1ebSV6MWlUE7ExsJFn5BUrw/100' : scope.row.thumbAvatar">
                            <div style="flex: 3; margin-left: 5px;">
                                <div style="margin-bottom: 5px;">{{scope.row.empName}}</div>
                                <div>{{scope.row.empPhone}}</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="userName" label="账号"></el-table-column>
                <el-table-column prop="deptName" label="部门"></el-table-column>
                <el-table-column prop="empJob" label="职务"></el-table-column>
                <el-table-column prop="rolesName" label="角色"></el-table-column>
                <el-table-column prop="createTime" label="添加时间"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="formHandle('edit', scope.row)" type="text" size="small">修改</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="interspaceH"></div>

            <el-pagination @size-change="queryDataHandle(pagePagination.currentPage,$event)"
                           @current-change="queryDataHandle($event,pagePagination.pageSize)"
                           :current-page="pagePagination.currentPage"
                           :page-sizes="pagePagination.pageSizes" :page-size="pagePagination.pageSize"
                           layout="total, sizes, prev, pager, next"
                           :total="pagePagination.total">
            </el-pagination>
        </el-card>


        <!--添加面板-->
        <el-dialog title="添加" :visible.sync="addVisible" width="30%" :close-on-click-modal="false">
            <el-form ref="formPanel" :model="formData" label-position="right" label-width="80px">
                <el-form-item label="账号">
                    <el-input v-model="formData.userName" size="small" placeholder="请输入账号" @change="nameChange()"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="formData.pwd" placeholder="请输入密码" type="password" size="small"></el-input>
                </el-form-item>
                <el-form-item label="确认密码">
                    <el-input v-model="formData.password" placeholder="请确认密码" type="password" size="small" @change="pwdChange()"></el-input>
                </el-form-item>
                <el-form-item label="选择员工">
                    <el-select v-model="formData.empId" placeholder="请选择员工" size="small">
                        <el-option v-for="item in emp" :key="item.empId" :label="item.empName" :value="item.empId">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="submitData('add')" type="primary" size="small">确定</el-button>
                <el-divider direction="vertical"></el-divider>
                <el-button @click="addVisible = false" size="small">取消</el-button>
            </span>
        </el-dialog>


        <!--修改面板-->
        <el-dialog title="修改" :visible.sync="updateVisible" width="30%" :close-on-click-modal="false">
            <el-form ref="formPanel" :model="formData" label-position="right" label-width="80px">
                <el-form-item label="账号">
                    <el-input v-model="formData.userName" size="small" readonly></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="formData.pwd" placeholder="请输入密码" type="password" size="small"></el-input>
                </el-form-item>
                <el-form-item label="确认密码">
                    <el-input v-model="formData.password" placeholder="请确认密码" type="password" size="small" @change="pwdChange()"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="submitData('edit')" type="primary" size="small">确定</el-button>
                <el-divider direction="vertical"></el-divider>
                <el-button @click="updateVisible = false" size="small">取消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 列表数据
            pageDataSource: [],
            pagePagination: {
                currentPage: 1,
                pageSizes: [10, 15, 20, 25],
                pageSize: 10,
                total: 0
            },
            // 添加页面显示
            addVisible: false,
            // 修改页面显示
            updateVisible: false,
            // 子页面内容
            formData: {
                userName: '',
                pwd: '',
                password: '',
                empId: ''
            },
            // 员工下拉列表
            emp: [],
        }
    },
    created() {
        this.queryDataHandle(1, 10);
        this.getNullList();
    },
    methods: {
        // 分页
        queryDataHandle(page, rows) {
            let that = this
            this.$request("/api/emp/getEmpDto/1_0", {}, "POST").then((data) => {
                that.pageDataSource = data.rows
            })
        },
        getNullList() {
            let that = this
            this.$request("/api/emp/getNullList/1_0", {}, "POST").then((data) => {
                that.emp = data.rows
            })
        },
        //打开添加/删除弹窗方法
        formHandle(type, row) {
            if (type == 'add') {
                this.addVisible = true
                this.formData = {
                    userName: '',
                    pwd: '',
                    password: '',
                }
            } else if (type == 'edit') {
                this.updateVisible = true
                this.formData = {...row}
            }
        },
        //提交/修改方法
        submitData(param) {
            let formData = this.formData
            let userName = this.formData.userName
            let password = this.formData.password
            let pwd = this.formData.pwd
            let empId = this.formData.empId

            let that = this
            // 密码判断
            if (null == password || '' == password || null == pwd || '' == pwd) {
                this.$message({
                    message: '密码不可为空',
                    type: 'error'
                });
                return;
            }
            if (password != pwd) {
                this.$message({
                    message: '两次密码不相同',
                    type: 'error'
                });
                return;
            }
            // --------------------添加--------------------
            if ('add' == param) {
                if (null == userName || '' == userName) {
                    that.$message({
                        message: '账号不可为空',
                        type: 'error'
                    });
                    return;
                }
                if (null == empId || '' == empId) {
                    that.$message({
                        message: '请选择员工',
                        type: 'error'
                    });
                    return;
                }

                // 账号唯一验证
                this.$request("/api/company/userNameOnly/1_0", formData, "POST").then((data) => {
                    if (null != data.data) {
                        that.$message({
                            message: '账号已存在',
                            type: 'error'
                        });
                        return;
                    }
                        // 账号添加
                        this.$request("/api/emp/addScrmLogin/1_0", formData, "POST").then((data) => {
                            that.$message({
                                message: '添加成功',
                                type: 'success'
                            });
                            that.addVisible = false;
                            that.queryDataHandle(1, 10);
                        })

                })
            }
            // --------------------修改--------------------
            if ('edit' == param) {
                this.$request("/api/emp/updateScrmLogin/1_0", formData, "POST").then((data) => {
                    that.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                    that.updateVisible = false;
                    that.queryDataHandle(1, 10);
                })
            }
        },
    }
}
</script>
